<template>
	<section class="Mainbg">
		<h1>仓库管理平台</h1>
		<div class="content">
			<ul>
				<li @click="handupdh()"><img src="../assets/dh.png" alt="">到货</li>
				<li @click="handuprk()"><img src="../assets/rk.png" alt="">入库</li>
				<li @click="handupkc()"><img src="../assets/kc.png" alt="">库存</li>
				<li @click="handupck()"><img src="../assets/ck.png" alt="">出库</li>
				<li><img src="../assets/bb.png" alt="">统计报表</li>
				<li><img src="../assets/bf.png" alt="">报废处理</li>
				<li><img src="../assets/qc.png" alt="">报废统计</li>
				<li><img src="../assets/cw.png" alt="">财务模块</li>
			</ul>
		</div>
		<img src="../assets/sy.jpg" alt="">
	</section>
</template>

<script>
	export default {
		data(){
			return {

			}
		},
		methods:{
			handupdh(){
				this.$router.push({path:'/Arrival'})
			},
			handuprk(){
				this.$router.push({path:'/Warehousing'})
			},
			handupkc(){
				this.$router.push({path:'/stock'})
			},
			handupck(){
				this.$router.push({path:'/Outbound'})
			}
		}
	}

</script>

<style lang="scss" scoped>
.Mainbg{
	position: relative;
	color: #fff;
	font-size: 24px;
	h1{
		position: absolute;
		top: 8%;
		left: 44%;
	}
	.content{
		position: absolute;
	    width: 930px;
		top: 20%;
		left: 25%;
		li{
			list-style: none;
			width: 190px;
			height: 170px;
			background-color: #fff;
			border-radius: 10px;
			float: left;
			text-align: center;
			cursor: pointer;
			margin: 15px;
				&:first-child{
					background-image: linear-gradient(#a94fe5, #731fab);
				}
				&:nth-child(2){
					background-image: linear-gradient(#fc9d6d, #f6733b);
				}
				&:nth-child(3){
					background-image: linear-gradient(#f39690, #d8483f);
				}
				&:nth-child(4){
					background-image: linear-gradient(#5bbff3, #5e62e8);
				}
				&:nth-child(5){
					background-image: linear-gradient(#5bbff3, #5e62e8);
				}
				&:nth-child(6){
					background-image: linear-gradient(#f39690, #d8483f);
				}
				&:nth-child(7){
					background-image: linear-gradient(#fc9d6d, #f6733b);
				}
				&:nth-child(8){
					background-image: linear-gradient(#f39690, #d8483f);
				}
				img{
					width: 65px;
					height: 70px;
					margin: 22px auto;
					display: block;
				}
			}
	}
}
.Mainbg img{
	width:100%;
	height: 950px;
}
</style>